<template>
  <div class="container">
    <div class="btnBox">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" :form="form" @keyup.enter.native="search">
          <a-form-item label="日期选择">
            <a-range-picker
              v-decorator="[ 'time',{ initialValue: [moment().startOf('day').format(),moment().endOf('day')] } ]"
              format="YYYY-MM-DD HH:mm:ss"
              :disabled-date="disabled"
              :ranges="timeRangs"
            >
            </a-range-picker>
          </a-form-item>
          <a-form-item label="登录地址(IP)">
            <a-input v-decorator="[ 'ipAddress' ]" placeholder="请输入登录地址" />
          </a-form-item>
          <a-form-item label="用户名称">
            <a-input v-decorator="[ 'nickName' ]" placeholder="请输入用户名称" />
          </a-form-item>
          <a-form-item label="状态">
            <a-select v-decorator="[ 'loginState',{ initialValue: '' }]" placeholder="请选择状态" style="width: 150px">
              <a-select-option value="" key=""> 全部</a-select-option>
              <a-select-option value="0"> 成功</a-select-option>
              <a-select-option value="1"> 失败</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item>
            <a-button type="primary" htmlType="submit" @click="search">查询</a-button>
            <a-button htmlType="submit" class="ml15" @click="searchReset">重置</a-button>
          </a-form-item>
        </a-form>
      </div>
    </div>
    <s-table
      ref="table"
      size="default"
      :columns="columns"
      :data="onSeach"
      bordered
      :rowKey="(record) => record.id"
    >
      <template slot="loginState" slot-scope="text, record">
        <a-tag :color="text ? 'red' : 'green'">
          {{text ? '失败' : '成功'}}
        </a-tag>
      </template>
    </s-table>
  </div>
</template>

<script>
import STable from '@/components/Table'
import { mapGetters } from 'vuex'
import { getLoginLogList } from '@/api/log-manage'
import store from '@/store'
import { Ellipsis } from '@/components'
import moment from 'moment'
import { timeRangs } from '@/utils/util'
export default {
  name: 'appConfiguration',
  components: { Ellipsis, STable },
  computed: {
    timeRangs() {
      return timeRangs
    },
    ...mapGetters(['userInfo'])
  },
  data() {
    return {
      form: this.$form.createForm(this),
      record: {}, // 行数据
      // 查询条件参数
      pageNum: 0,
      pageSize: 10,
      total: 0,
      columns: [
        { title: '访问编码', dataIndex: 'id', align: 'center' },
        { title: '管理员ID', dataIndex: 'userId', align: 'center' },
        { title: '地址', dataIndex: 'ipAddress', align: 'center' },
        { title: '登录状态', dataIndex: 'loginState', scopedSlots: { customRender: 'loginState' }, align: 'center' },
        { title: '描述', dataIndex: 'note', align: 'center', customRender: (text) => (text ? text : '-'), },
        { title: '访问时间', dataIndex: 'loginTime', align: 'center' },
      ]
    }
  },
  methods: {
    moment,
    disabled(current) {
      return current && current > moment().subtract().endOf('day')
    },
    // 条件查询列表
    onSeach(parameter) {
      return new Promise((resolve, reject) => {
        const params = {
          ...parameter,
          userId: store.getters.userInfo?.userId,
          ...this.form.getFieldsValue(),
          startTime: moment(this.form.getFieldValue('time')[0]).format('YYYY-MM-DD HH:mm:ss'),
          endTime: moment(this.form.getFieldValue('time')[1]).format('YYYY-MM-DD HH:mm:ss'),
        }
        delete params.time
        getLoginLogList(params).then(res => {
          resolve(res.data)
        }).catch((err) => {
          console.log(err, 'err')
          // reject(err)
        })
      })
    },
    refresh(boo) {
      this.$refs.table.refresh(boo)
    },
    search() {
      this.$refs.table.refresh() // refresh() 不传参默认值 false 不刷新到分页第一页
    },
    searchReset() {
      this.form.resetFields()
      this.$refs.table.refresh(true) // refresh() 不传参默认值 false 不刷新到分页第一页
    }
  }
}
</script>
<style lang="less" scoped>
</style>
